<template>
	<div class="login-container"> 
		<div class="top-logo">
			<h2> 良食社区出餐管理系统</h2>
		</div >
		<img class="back-img" src='../assets/img/vegetable.png'/>
		<div class="input-line">
			<img src="../assets/img/staff.png" />
			<input placeholder="员工号" v-model="empNo"/>
		</div>
		<div class="input-line">
			<img src="../assets/img/passwd.png" />
			<input placeholder="登录密码" type="password" v-model="password"/>
		</div>
		<div class="input-line">
			<img src="../assets/img/module.png" />
			<el-select v-model="selModule" placeholder="选择登录模块">
				<el-option v-for="item in modules"
						:key="item.id"
						:label="item.name"
						:disabled="item.disabled"
						:value="item.id">
				</el-option>
			</el-select>	
		</div>
		<div class="input-line">
			<img src="../assets/img/module.png" />
			<input placeholder="服务器地址" v-model="serverHost"/>
		</div>
		<div class="oper-line">
			<el-button type="primary"	class="btn-login"	@click="login">登录</el-button>
		</div>
	</div>
</template>

<script>
 import api from "../api.js"
 import util from "../util.js"

export default {
		mounted: function(){	
			this.serverHost = util.getServerHost();
		},
    data:() => ({
				serverHost: "",
				empNo: "",
				password: "",
				selModule: "",
        modules: [
            {id: 1, name: '配菜'},
            {id: 2, name: '传菜'},
        ],
    }),
		methods: {
			selectModule: function(data){ 
				this.selModule = {name: data.content, index: -1};
				for (let i=0, len=this.modules.length; i<len; i++) {
						if (this.modules[i].content === data.content) {
							this.selModule.index = i;
							break;
						}
				}
			},
			
			login: function() {
				let empNo = this.empNo.trim();
				if (empNo === "") {
					this.$alert('请输入员工号！','错误');
					return;
				}
				let password = this.password.trim();
				if (password === "") {
					this.$alert('请输入登录密码！',  '错误');
					return;
				}
				if (!this.selModule) {
					this.$alert('请选择登录模块！',  '错误');
					return;
				}
				let serverHost = this.serverHost.trim();
				if (serverHost == "") {
						this.$alert('请输入服务器地址！', '错误');
						return;
				}
				window.localStorage.setItem("serverHost",this.serverHost); 
				
				let data = {empNo: empNo, password: password};
				util.request(this,api.AuthLogin, data, "POST")
				.then(res => {
					let token = res.data.token;
					let user = res.data.user;
					window.localStorage.setItem("token",token); 
					window.localStorage.setItem("user",JSON.stringify(user)); 
					let module = (this.selModule == 1) ?'prepare':'passon';
					this.$router.replace({name: module});
				})
				.catch(err => {
						this.$alert(err.data.errmsg, '错误');
				})
				
			}
		}
}
</script>

<style>

.login-container {
	padding: 16px;
	background: #2E406D;
	color: #FFFFFF;
	width: 100vw;
	height: 100vh;
	position: relative;
	box-sizing: border-box;
	display:  flex;
	flex-direction: column;
	align-items: center;
}
.back-img {
	position: absolute;
	top: calc(50vh - 100vw * 359 /1408 + 16px );
	width: calc(100vw - 32px);
	height: calc(100vw * 718 / 1408 - 32px);
	z-index: -1000;
}
.top-logo {
	margin-top: 154px;
	/* margin-bottom: 49px; */
	width: 368px;
	height: 61px;
	flex: none;
	text-align: center;
}
.input-line {
	margin-top: 20px;
	padding-left: 24px;
	width:368px;
	height:44px;
	box-sizing: border-box;
	background:rgba(51,72,123,1);
	border-radius:16px;
	border:1px solid rgba(77,107,157,1);
	z-index: 100;
	flex: none;
	display: flex;
	align-items: center;
	line-height: 22px;
}
.input-line img {
	width: 16px;
	height: 16px;
}
.input-line input {
	margin-left: 16px;
	width: 305px;
	border: transparent;
	background: transparent;
	outline: transparent;
	color: #FFFFFF;
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: rgba(255,255,255,0.61);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: rgba(255,255,255);
		opacity:  0.61;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: rgba(255,255,255);
		opacity:  0.61;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgba(255,255,255,0.61);
}
.select-menu {
	margin-left: 16px;
	width: calc(100% - 30px);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.selector {
	font-size: 16px;
	color: rgba(255,255,255,0.61);
	border: transparent;
	background: transparent;
	outline: transparent;
}
.ant-dropdown {
	width: 300px ;
}
.ant-dropdown-menu-item {
	font-size: 16px;
	line-height: 2em;
}

.oper-line {
	margin-top: 40px;
}
.btn-login {
	width:368px;
	height:44px;
	background: rgba(230,210,182,1);
	border: transparent;
	border-radius:16px;
	font-size: 16px;
	font-weight: 500;
	color:rgba(46,64,109,1);
	line-height:24px;
}
</style>
